<template>
	<view class="voice-line-wrap">
		<view class="voice-line one"></view>
		<view class="voice-line two"></view>
		<view class="voice-line three"></view>
		<view class="voice-line four"></view>
	</view>
</template>

<script>
	export default {
		name: "liveIcon",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.voice-line-wrap {
		display: flex;
		align-items: flex-end;
		justify-content: center;

		.voice-line {
			width: 5rpx;
			height: 30rpx;
			border-radius: 3rpx;
			margin: 0 2rpx;
			background-color: #fff;
		}

		.one {
			animation: wave 0.4s 1s linear infinite alternate;
		}

		.two {
			animation: wave 0.4s 0.9s linear infinite alternate;
		}

		.three {
			animation: wave 0.4s 0.8s linear infinite alternate;
		}

		.four {
			animation: wave 0.4s 0.7s linear infinite alternate;
		}
	}

	@keyframes wave {
		0% {
			transform: scale(1, 1);
			// background-color: royalblue;
			background-color: #fff;
		}

		100% {
			transform: scale(1, 0.2);
			// background-color: indianred;
			background-color: #fff;
		}
	}
</style>